
<!-- 添加数据
<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="商品品牌" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择商品品牌">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品分类" prop="count">
        <el-select-v2
          v-model="ruleForm.count"
          placeholder="请选择商品分类"
          :options="options" />
      </el-form-item>
      <el-form-item label="商品价格" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="商品图片" prop="name">
      </el-form-item>
      <el-form-item label="状态" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio value="Sponsorship">上架</el-radio>
          <el-radio value="Venue">下架</el-radio>
        </el-radio-group>
      </el-form-item>




      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  

  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  //商品信息响应式数据
  const ruleForm = reactive({
    name: '',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    location: '',
    type: [],
    resource: '',
    desc: '',
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  //规则验证
  const rules = reactive<FormRules>({
    name: [
      { required: true, message: '请输入商品名称', trigger: 'blur' },
      { min: 3, max: 20, message: '商品名称长度介于3-20个字符之间', trigger: 'blur' },
    ],
    region: [
      {
        required: true,
        message: '商品品牌不能为空',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: '请选择商品分类',
        trigger: 'change',
      },
    ],
    date1: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    date2: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    location: [
      {
        required: true,
        message: 'Please select a location',
        trigger: 'change',
      },
    ],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [
      {
        required: true,
        message: 'Please select activity resource',
        trigger: 'change',
      },
    ],
    desc: [
      { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
  })
  
  //保存方法
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  //清空控件
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  //表单设置
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))


  </script> -->
  
<!-- 图片上传
<template>
  <el-upload
    class="avatar-uploader"
    action="https://localhost:44377/api/FileUpload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片类型必须是jpg格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style> -->

<!-- 富文本编辑器
<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
</template>

<script setup lang="ts">
  import '@wangeditor/editor/dist/css/style.css' // 引入 css

  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  import { Editor, Toolbar } from '../../node_modules/@wangeditor/editor-for-vue'

 
  const mode=ref()
  const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')
  const toolbarConfig = {}
      const editorConfig = { placeholder: '请输入内容...' }

      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      const handleCreated = (editor:any) => {
        editorRef.value = editor // 记录 editor 实例，重要！
      }


</script> -->

<!-- 级联选择器
<template>
  <div class="m-4">
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
onMounted(()=>{
  LoadType()
})

const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
}

const handleChange = (value:any) => {
  console.log(value)
}

const options = ref([])
const LoadType=()=>{
  
  axios.get("/api/Goods/ShowGoodsType?Pid=0")
  .then(res=>{
    options.value=res.data.Data
    console.log(options.value)

  })
}
</script> -->


<!-- 分页组件
<template>

  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[1, 2, 5, 10]"
      :size="size"
      background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(4)
const pageSize4 = ref(2)
const size = ref<ComponentSize>('default')


</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style> -->


<!-- 行内表单
<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="登录名称">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style> -->


<!-- 树形控件
<template>
  <el-tree
    style="max-width: 600px"
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    :props="defaultProps"
  />
</template>

<script lang="ts" setup>

import axios from 'axios';
import { onMounted, ref } from 'vue';

onMounted(()=>{
  LoadPermission()
})
const defaultProps = {
  children: 'children',
  label: 'label',
}
const data = ref([{
    "id": 0,
    "label": "",
    "children": []
}])
//加载权限信息
const LoadPermission=()=>{
  axios.get("/api/User/GetPermission?Pid=0")
  .then(res=>{
    data.value=res.data.Data
  })
}
</script> -->


<!-- 布局容器
<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template> -->


<!-- 菜单
<template>
  <el-row class="tac">
    <el-col :span="12">
      <h5 class="mb-2">Custom colors</h5>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>默认页面</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">HomeView</el-menu-item>
            <el-menu-item index="1-2">AboutView</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        
          <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">添加商品</el-menu-item>
            <el-menu-item index="2-2">商品信息</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">添加用户角色</el-menu-item>
            <el-menu-item index="2-2">用户角色信息</el-menu-item>
            <el-menu-item index="2-1">添加角色权限</el-menu-item>
            <el-menu-item index="2-2">角色权限信息</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
          
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>商品管理</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-header {
    height: 60px;
    line-height: 60px;
    background-color: rgb(37 82 209);
    color: #fff;
}

.el-aside {
    min-height: calc(100vh - 60px);
    background-color: #545c64;
}
</style> -->


<!-- 弹窗
<template>
  <el-button plain @click="dialogVisible = true">
    入住
  </el-button>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="入住人" prop="Order_UserName">
      <el-input v-model="ruleForm.Order_UserName" />
    </el-form-item>
    <el-form-item label="手机号" prop="Order_Phone">
      <el-input v-model="ruleForm.Order_Phone" />
    </el-form-item>
    <el-form-item label="房间号" prop="Order_RoomCode">
      <el-select v-model="ruleForm.Order_RoomCode" placeholder="Activity zone">
        <el-option label="101" value="101" />
        <el-option label="102" value="102" />
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
      
      <el-button @click="dialogVisible = false">关闭</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}


const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  Order_UserName: '',
  Order_Phone: '',
  Order_RoomCode:''
})

//验证
const rules = reactive<FormRules>({
  Order_UserName: [
    { required: true, message: '入住人不能为空', trigger: 'blur' },
    { min: 3, max: 5, message: '入住人姓名介于3-5个字符', trigger: 'blur' },
  ],
  Order_Phone: [
    {
      required: true,
      message: '手机号不能为空',
      trigger: 'blur',
    },
  ],
  
  Order_RoomCode: [
    {
      required: true,
      message: '房间号哦啊不能为空',
      trigger: 'change',
    },
  ],
})
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
//清空
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script> -->


折线图表
<template>
  <el-row>
    <el-col :span="12">
      <VueEcharts :option="option" style="width: 600px;height: 400px; margin: 0 auto;" > </VueEcharts>
    </el-col>
    <el-col :span="12">
      <VueEcharts :option="option1" style="width: 600px;height: 400px; margin: 0 auto;" > </VueEcharts>
    </el-col>
    <el-col :span="12">
      <VueEcharts :option="option2" style="width: 600px;height: 400px; margin: 0 auto;" > </VueEcharts>
    </el-col>

  </el-row>
  
 



</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,reactive, onMounted } from 'vue';
import 'echarts'
import VueEcharts from 'vue-echarts'

onMounted(()=>{
  LoadData()
})

//折线图
const option=ref({});
const option1=ref({});
const option2=ref({});

//加载数据
const LoadData=()=>{
  axios.get("/api/Count/GetOrderCountList")
  .then(res=>{
    let OrderData=res.data.Data

    //依次获取日期和数量并保存到数组中
    let dataArray=OrderData.map((item:any)=>item.Day);
    let orderArray=OrderData.map((item:any)=>item.Count);

    //创建饼图所需数组
    let PieChart:any=[];
    //从后台返回的数据进行数据遍历,将数据保存到饼图数组中
    OrderData.forEach((element:any)=>{
      PieChart.push({value:element.Count,name:element.Day})
    });

    //折线图
    option.value = {
      xAxis: {
        type: 'category',
        data:dataArray
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: orderArray,
          type: 'line'
        }
      ]
    };
    //柱状图
    option1.value = {
      xAxis: {
        type: 'category',
        data:dataArray
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: orderArray,
          type: 'bar'
        }
      ]
    };
    //饼图
    option2.value = {
        title: {
        text: '日订单统计',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: PieChart,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };





  })
}

</script>





